<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>bilibili-周边商城-购物车</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/cart.css">
</head>
<body>
	<!-- header头部 -->
	<header class='clearfix'>
		<div class='top_nav'>
			<div  class='top_nav_con clearfix'>
				<ul class='left_nav'>
					<li><a href="index.html">主站</a></li>
					<li><a href="paint-friend.html">画友</a></li>
					<li><a href="game.html" target='_blank'>游戏中心</a></li>
					<li><a href="video.html">直播</a></li>
					<li><a href="shop.html">周边</a></li>
				</ul>
				
				<ul class='right_nav'>
					<li><a href="###">我的订单</a></li>
					<li class='cart'><a href="cart.html" target='_blank'>购物车</a></li>
				</ul>

				<div class="user">
					<a href="###"  class='user_img'></a>
					<div class="info_box" id='infoBox'>
						<div class="user_info">
							<div class="info_top">
								<p class='username'>Tracy_腾</p>
								<p class='userdefaure clearfix'>
									<span class='de_l'>
										<a href="###" title='硬币'><b>34</b></a>
										<a href="###" title='B币'><b>0</b></a>
									</span>
									<span class='de_r'>
										<a href="###" class='e_link'><span class='email'>前去绑定邮箱</span><i class='email_i'><em class='email_em'></em></i></a>
										<a href="###" class='p_link'><span class='phone'>前去绑定手机</span><i><em></em></i></a>
									</span>
								</p>
								<p class='userlevel clearfix'>
									<span class='levelbox clearfix'>
										<i>等级</i>
										<a href="###" id='level_link'>
											<em class='level_num'></em>
											<em class='level_line'></em>
										</a>
									</span>
									<span class='ex'><b>0</b>/1500</span>
									<div class="level_info" id='levelInfo'>
										<h2>作为<strong>LV2</strong>, 你可以：</h2>
										<ul>
											<li>1、发射个性弹幕（彩色、高级）</li>
											<li>2、参与视频互动（评论）</li>
											<li>3、投稿成为偶像 </li>
										</ul>
										<p><a href="###">会员等级相关说明 &gt;</a></p>
										<i><em></em></i>
									</div>
								</p>
							</div>
							<div class="info_mid">
								<ul class='clearfix'>
									<li><a href="###">个人中心</a></li>	
									<li><a href="###">投稿管理</a></li>
									<li><a href="###">B币钱包</a></li>	
									<li><a href="###">直播中心</a></li>
								</ul>
							</div>
						</div>
						<div class="user_out"><a href="###">退出</a></div>
					</div>
				</div>
			</div>
		</div>
	</header>
	<!-- content主体内容 -->
	<section>
		<div class="con_title">
			<div class='check'></div>
			<div class='comfirm'></div>
			<div class='pay'></div>
		</div>
		<div class="con_list">
			<table cellspacing='0' id='cartTable'>
				<thead>
					<tr>
						<th><label><input type="checkbox" class='select_all check'>全选</label></th>
						<th>商品</th>
						<th>单价</th>
						<th>购买数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><input type="checkbox" class='select_one check'></td>
						<td class='clearfix'>
							<div class='good_img'><a href="###"><img src="img/cart/cartimg01.jpg_200x200.jpg"></a></div>
							<div class='good_intro'>
								<p><a href="###">bilibili周边 初秋新品 小电视圆领脱宅卫衣</a></p>
								<span><a href="###">尺码1</a></span>
							</div>
						</td>
						<td>￥<span>109.00</span></td>
						<td class='clearfix'>
							<div><a href="###"><i class='reduce'></i></a></div>
							<div><input type="text" value='1'></div>
							<div><a href="###"><i class='add'>+</i></a></div>
						</td>
						<td>￥<span>109.00</span></td>
						<td><a href="###" class='delete'>删除</a></td>
					</tr>
					<tr>
						<td><input type="checkbox" class='select_one check'></td>
						<td class='clearfix'>
							<div class='good_img'><a href="###"><img src="img/cart/cartimg02.jpg_200x200.jpg"></a></div>
							<div class='good_intro'>
								<p><a href="###">【新品】bilibili周边 白色节奏痛包 透明痛包帆布单肩</a></p>
								<span><a href="###">尺码1</a></span>
							</div>
						</td>
						<td>￥<span>179.00</span></td>
						<td class='clearfix'>
							<div><a href="###"><i class='reduce'></i></a></div>
							<div><input type="text" value='1'></div>
							<div><a href="###"><i class='add'>+</i></a></div>
						</td>
						<td>￥<span>179.00</span></td>
						<td><a href="###" class='delete'>删除</a></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="con_total clearfix">
			<p class='delete_all'><a href="###">删除选中的商品</a></p>
			<div class="total_count">
				<div class="select clearfix">已选商品：<span id='selected_total'>0</span></div>
				<div class='total_price clearfix'>总价：<span class='price' id='price_total'>0.00</span></div>
				<div class='btn_link'>
					<button class='shop_again'>继续购物</button>
					<button class='payfor'>去结算</button>
				</div>
			</div>
		</div>
	</section>

	<!-- footer底部 -->
	<footer>
		<div class="foot_top clearfix">
			<div class="bilibili">
				<p>bilibili</p>
				<div class="about clearfix">
					<ul>
						<li><a href="###">关于我们</a></li>
						<li><a href="###">联系我们</a></li>
					</ul>
					<ul>
						<li><a href="###">友情链接</a></li>
						<li><a href="###">加入我们</a></li>
					</ul>
					<ul>
						<li><a href="###">哔哩哔哩周边</a></li>
						<li><a href="###">官方认证</a></li>
					</ul>
				</div>
			</div>
			<div class="fast_link">
				<p>传送门</p>
				<div class="about clearfix">
					<ul>
						<li><a href="###">帮助中心</a></li>
						<li><a href="###">侵权申诉</a></li>
						<li><a href="###">用户反馈论坛</a></li>
					</ul>
					<ul>
						<li><a href="###">高级弹幕</a></li>
						<li><a href="###">分院帽计划</a></li>
						<li><a href="###">壁纸站</a></li>
					</ul>
					<ul>
						<li><a href="###">活动专题页</a></li>
						<li><a href="###">活动中心</a></li>
						<li><a href="###">名人堂</a></li>
					</ul>
				</div>
			</div>
			<div class="focus clearfix">
				<a href="###">
					<dl>
						<dt class='focus_pic phone'></dt>
						<dt class='code_pic phone_code'></dt>
						<dd class='focus_pro'>手机端下载 </dd>
					</dl>
				</a>
				<a href="###">
					<dl>
						<dt class='focus_pic sina'></dt>
						<dt class='code_pic sina_code'></dt>
						<dd class='focus_pro'>新浪微博</dd>
					</dl>
				</a>
				<a href="###">
					<dl>
						<dt class='focus_pic official'></dt>
						<dt class='code_pic wechat_code'></dt>
						<dd class='focus_pro'>官方微信</dd>
					</dl>
				</a>
			</div>	 
		</div>
		<div class="foot_bottom clearfix">
			<div class="cooper"><img src="img/index/cooper.png" alt=""></div>
			<div class="foot_info">
				<p>广播电视节目制作经营许可证：（沪）字第1248号 | 网络文化经营许可证：沪网文[2013]0480-056号 | 信息网络传播视听节目许可证：0910417 | 互联网ICP备案：沪ICP备13002172号-3 沪ICP证：沪B2-20100043 | 违法不良信息举报邮箱：help@bilibili.com | 违法不良信息举报电话：4000233233转3</p>
				<p>网上有害信息举报专区： <a href="###">中国互联网违法和不良信息举报中心</a> |  <a href="###">上海互联网举报中心</a> | <a href="###">12318 全国文化市场举报网站</a></p>
			</div>
		</div>
	</footer>
	<!-- 返回顶部 -->
	<div class="top_arrow" id='toTop'></div>

	

	<script src='js/jquery-3.1.1.min.js'></script>
	<script src='js/cart.js'></script>
</body>
</html>